<!--景区管理页-->
<template>

  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">景区管理</span>
    <el-button @click="dialogVisible=true" type="primary"
               style="float:right;margin-top:13px;">新建景区</el-button>
  </div>

  <!-- 新增用户弹窗 -->
  <el-dialog :title="dialogTitle" style="width:1000px;padding:40px;" v-model="dialogVisible":before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入景区户名" v-model="saveAreaForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="价格">
            <el-input placeholder="请输入价格" v-model="saveAreaForm.price"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="标语">
            <el-input placeholder="请输入景区标语" v-model="saveAreaForm.slogan"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出发地">
            <el-input placeholder="请输入出发地" v-model="saveAreaForm.departure"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="评分">
            <el-input placeholder="请输入景区评分" v-model="saveAreaForm.rating"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="访问量">
            <el-input placeholder="请输入访问量"v-model="saveAreaForm.visit_count"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="短介绍">
            <el-input placeholder="请输入短介绍"v-model="saveAreaForm.sIntroduction"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="具体介绍">
            <el-input placeholder="请输入具体介绍" v-model="saveAreaForm.introduction"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="地理位置">
            <el-input placeholder="请输入地理位置" v-model="saveAreaForm.landform"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="具体位置">
            <el-input placeholder="请输入具体位置" v-model="saveAreaForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="图片链接1">
            <el-input placeholder="请输入图片链接" v-model="saveAreaForm.imgUrl"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片链接2">
            <el-input placeholder="请输入图片链接" v-model="saveAreaForm.imgUrl1"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="图片链接3">
            <el-input placeholder="请输入图片链接3"v-model="saveAreaForm.imgUrl2"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="图片链接4">
            <el-input placeholder="请输入图片链接4" v-model="saveAreaForm.imgUrl3"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="图片链接4">
        <el-input placeholder="请输入景区浏览图"v-model="saveAreaForm.imgUrl4"></el-input>
      </el-form-item>

    </el-form>
    <template #footer>
      <el-button @click="handleClose()">取消</el-button>
      <el-button type="primary" @click="saveArea">保存</el-button>
    </template>
  </el-dialog>
  <el-card style="margin:20px;">
    <el-table :data="sceneArr">
      <el-table-column prop="name" label="景区" width="80" align="center"/>
      <el-table-column prop="price" label="票价" align="center"/>
      <el-table-column prop="slogan" label="标语" align="center"/>
      <el-table-column prop="departure" label="出发地" align="center"/>
      <el-table-column prop="address" label="具体地址" align="center">

      </el-table-column>

      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small"  @click="deleteArea(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <div>
    <img src="/imgs/scene/xuy.jpg"style="width: 1600px;height:800px;padding: 20px; ">
  </div>

  //卡片





</template>

<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import qs from "qs";

//控制新增用户弹窗是否显示
const dialogVisible = ref();
//定义变量控制dialog的标题
const dialogTitle = ref('新建景区');
//准备对象用来收集新增信息
const saveAreaForm = ref({
  name:'',
  price:'',
  departure:'',
  slogan:'',
  address:'',
  landform:'',
  sIntroduction:'',
  introduction:'',
  rating:'',
  visit_count:'',
  imgUrl:'',
  imgUrl1:'',
  imgUrl2:'',
  imgUrl3:'',
  imgUrl4:''
})
//新增景区
const saveArea=()=>{
  let data =qs.stringify(saveAreaForm.value);
  console.log(data);
  axios.post(BASE_URL+'/yyt/scene/save',data).then((Response)=>{
    if (Response.data.code==2000){
      ElMessage.success('保存成功');
      dialogVisible.value=false;
      saveAreaForm.value={};
    }else {
      ElMessage.error("请求失败，请稍后再试");
    }
  })
}
//关闭功能
const handleClose = ()=>{
  if(confirm('是否关闭本窗口?')){
    //用户确认关闭后,将审批弹窗与确认驳回弹窗一起关掉
    dialogVisible.value = false;
    //取消时把填的数据都清空，表单回复到初始状态
    saveAreaForm.value={};
  }
}
//加载
const sceneArr =ref([]);
const searchSceneForm = ref({name: '', id: ''});

const loadArea = ()=>{
  let data = qs.stringify(searchSceneForm.value);
  axios.get( BASE_URL+'/yyt/scene/select',data).then((response)=>{
    if (response.data.code==2000){
      sceneArr.value=response.data.data;
      console.log(sceneArr.value)
    }else {
      ElMessage.error('失败');
    }
  })

}
onMounted(() => {
  loadArea();
})
const deleteArea = (areaId) => {
  if (confirm('你确定要删除吗？')){
    console.log(areaId)
    axios.post(BASE_URL+'/yyt/scene/delete/'+areaId).then((Response)=>{
      if (Response.data.code==2000){
        ElMessage.success('删除成功！');
        loadArea();
      }else {
        ElMessage.error('删除失败');
      }
    })
  }
}

</script>

<style scoped>

</style>>